![【SwiftUI】大きいプログレスバーを表示したい](https://devio2024-media.developers.io/image/upload/v1720776037/user-gen-eyecatch/bcoro23fjnks24esfjgm.png)
【SwiftUI】大きいプログレスバーを表示したい
通常のSwiftUIで用意されているプログレスバーが自分の欲しいサイズに比べると小さかった為、大きいプログレスバーの表示方法を調べました。
環境
- Xcode 15.2
通常
struct ProgressBarView: View {
var body: some View {
ProgressView(value: 20, total: 100)
.tint(.red)
.padding()
}
}
すごい小さいです。
しかし、下記のようにheight
を与えても高さが変わりません。
struct ProgressBarView: View {
var body: some View {
ProgressView(value: 20, total: 100)
.frame(height: 100)
.tint(.red)
.padding()
}
}
scaleEffectで拡大
今回は縦方向のサイズを変更したいので、y
方向のscaleEffect
の値を4
倍にしてみます。
struct ProgressBarView: View {
var body: some View {
ProgressView(value: 20, total: 100)
// y方向の倍率を変更
.scaleEffect(x: 1, y: 4, anchor: .center)
.tint(.red)
.padding()
}
}
高さが変更されました。
しかし、よく見ると、プログレスバーが四角っぽくなってしまいました。
先端が丸くなるようにクリップする
clipShape
を付与した後に、height
の値やscaleEffect
のy
の値をお好みで指定しながら、理想な形になるように調整してみてください
struct ProgressBarTestView: View {
var body: some View {
ProgressView(value: 20, total: 100)
.tint(.red)
.frame(height: 20)
.scaleEffect(x: 1, y: 40, anchor: .center)
// カプセル形状にクリップする
.clipShape(Capsule())
.padding()
}
}
おまけ
大きいプログレスバー用にProgressViewStyle
を作成しておくと便利かもしれません。
struct LargeProgressBarStyle: ProgressViewStyle {
func makeBody(configuration: Configuration) -> some View {
ProgressView(configuration)
.frame(height: 40)
.scaleEffect(x: 1, y: 40, anchor: .center)
.clipShape(Capsule())
}
}
struct ProgressBarTestView: View {
var body: some View {
ProgressView(value: 20, total: 100)
.tint(.red)
.progressViewStyle(LargeProgressBarStyle())
.padding()
}
}
おわりに
これで大きいプログレスバーを表示できるようになりました!
簡単に大きいサイズにできなくしているApple側の意図が気になるところです🤔
「もっと簡単に大きくできるよ」などの情報ありましたら教えていただけると嬉しいです☺︎
参考